import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

/* 1 - JSX & Rendering */
/* JSX & 元素渲染 */

const user = {
  firstName: 'Lady',
  lastName: 'Gaga'
};

function formatName(user) {
  return `${user.firstName}\n${user.lastName}`;
}

// JSX书写格式, 避免分号陷阱
// JSX只能有一个根标签
// 标签中能有表达式(产生值的), 不能有语句, 注意分号
// 没有元素时, 使用"/>"闭合标签
// 样式的类名指定不要用class, 要用className
// 内联样式写style={{color:"red"}} ({obj}, style=对象, 里面是键值对)
// Babel会把JSX转译成一个名为React.createElement()函数调用
const element = (
  <h1
    className="testH1"
  >
    Hello, {formatName(user)}
  </h1>
);

const data = ['Angular', 'React', 'Vue'];

const element2 = (
  <div>
    <h1>JS框架列表</h1>
    <ul>
      {
        data.map((item, index) => {
          return <li key={index}>{item}</li>;
        })
      }
    </ul>
  </div>
);

/* setTimeout(()=> {
  ReactDOM.render(
    element,
    document.getElementById('root')
  );
}, 2000); */

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);
